<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.4/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/be_current.css">
    <link rel="stylesheet" href="../static/css/help.css">


    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>


</head>
<body class="bg-gray-100">

<!-- 右上角按钮容器 -->
<div class="top-right-buttons">
    <!--    <span class="navbar-text" id="username-display">欢迎:{{current_user()}}</span>-->
    <!-- 切换导航栏按钮 -->
    <button class="toggle-sidebar-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        <i class="glyphicon glyphicon-list"></i>
    </button>
</div>
<!-- 侧边导航栏 -->
<div class="sidebar bg-gray-800 text-white flex flex-col justify-between h-screen">
    <!-- 导航栏顶部 -->
    <div>
        <div class="text-center py-4 border-b border-gray-700">
            <a href="/#" class="text-blue-400 font-bold">新零售配送优化</a>
        </div>
        <div class="mt-4">
            <a href="" class="block px-4 py-3 hover:bg-gray-700 ">用户:{{current_user()}}</a>
            <a href="/optimize" class="block px-4 py-3 hover:bg-gray-700">路径优化</a>
            <a href="/history" class="block px-4 py-3 hover:bg-gray-700">历史记录</a>
            <a href="/setting" class="block px-4 py-3 hover:bg-gray-700">路径优化参数设置</a>
            <a href="/help" class="block px-4 py-3 hover:bg-gray-700">帮助/说明页</a>
        </div>
    </div>

    <!-- 导航栏底部 包含切换按钮  -->
    <div>
        <a href="/feedback" class="block px-4 py-3 hover:bg-gray-700">反馈与建议</a>
        <a href="/logout" class="block px-4 py-3 hover:bg-gray-700" onclick="confirmLogout(event)">退出登录</a>
    </div>
</div>


<div class="mt-4 text-center">
    <div class="jumbotron mt-2">
        <h1 class="display-4">帮助与说明</h1>
        <!-- ... -->
    </div>
    <div class="card">
        <div class="card-header">
            <h2>系统介绍</h2>
        </div>
        <div class="card-body">
            <p>本系统旨在帮助用户有效地进行新零售配送路径的规划和优化。</p>
        </div>
    </div>

    <!-- 每个问题的面板 -->
    <div class="card mt-2">
        <div class="card-header">
            <h2>使用方法</h2>
        </div>
        <div class="card-body">
            <p>在主页面用户上传网站提供的含有CVRP数据的文件，选择完毕后点击按钮后台接收文件数据并计算优化，计算完毕后会将结果返回给路径优化界面，<a
                    href="setting">需要设置参数请点我</a></p>
        </div>
    </div>

    <!-- 常见问题部分 -->
    <div class="card mt-4">
        <div class="card-header">
            <h2>常见问题</h2>
        </div>
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne1">
                    <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">如何上传数据和准备文件</a></h4>
                </div>
                <div id="collapseOne1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <p>您可以通过点击“选择文件”按钮来上传文件。</p>
                        <p>文件应为.csv、.txt或.json格式，并包含必需的配送点坐标、需求量、车辆容量等信息。</p>
                        <p>确保数据格式符合我们系统的要求，您可以在帮助/说明页上找到详细的文件格式说明。</p>
                    </div>
                </div>
                <div class="panel-heading" role="tab" id="headingOne2">
                    <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">如何理解和评估优化结果</a></h4>
                </div>
                <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <p>结果页面会展示一个路线图，其中每条线代表一辆配送车的路线，点的大小表示需求量的多少。</p>
                        <p>路线图下方会显示总成本，即所有车辆行驶的总距离。</p>
                        <p>您可以根据总成本和路线图来评估路线的有效性，并进行必要的调整。</p>
                    </div>
                </div>
                <div class="panel-heading" role="tab" id="headingOne3">
                    <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">调整关键参数对结果的影响</a></h4>
                </div>
                <div id="collapseOne3" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <p>种群大小决定了搜索解决方案的多样性，种群越大，可能找到更优解的机会越高，但计算时间也会增长。</p>
                        <p>代数决定了算法运行的迭代次数，迭代次数越多，解决方案越可能接近最优，但也会消耗更多时间。</p>
                        <p>最大容量指的是每辆配送车的最大承载能力，它直接影响到路线规划。</p>
                        <p>
                            变异率决定了算法在搜索过程中引入随机性的程度，一定程度的变异可以避免算法早熟，但变异率过高可能导致解的质量下降。</p>
                    </div>
                </div>
                <div class="panel-heading" role="tab" id="headingOne4">
                    <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion"
                                               href="#collapseOne" aria-expanded="true"
                                               aria-controls="collapseOne">遇到问题时如何获得帮助</a></h4>
                </div>
                <div id="collapseOne4" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <p>如果您在使用过程中遇到任何技术问题或操作上的疑问，可以通过“反馈与建议”菜单与我们联系。</p>
                        <p>
                            您也可以直接发送邮件至username@example.com，或拨打我们的客服电话123456789，我们的技术团队会及时为您提供支持。</p>


                    </div>
                </div>
            </div>

        </div>

        <div class="download-section">
            <h2>资源下载</h2>
            <p>为了便于您准确快速地上传数据，我们提供了以下资源：</p>
            <ul>
                <li><a href="../static/download_file/数据模板.txt" download="数据模板.txt">数据模板文件<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></a> - 包含所需的数据结构模板。
                </li>
                <li><a href="../static/download_file/数据模板说明.txt" download="数据模板说明.txt">数据模板说明文档<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></a> - 详细介绍数据模板的各个部分。
                </li>
                <li><a href="../static/download_file/数据转换1.py" download="数据模板.txt">CVRP官方数据转换1<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></a> - 数据转化为VRPLIB格式文件第一步。
                </li>
                <li><a href="../static/download_file/数据转换2.py" download="数据模板说明.txt">CVRP官方数据转换2<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span></a> - 数据转化为VRPLIB格式文件第二步。
                </li>
            </ul>
        </div>
    </div>

</div>


<script src="../static/js/logout.js"></script>
<script src="../static/js/be_current.js"></script>
</body>
</html>
